<template>
  <el-table
    @row-dblclick="click"
    :data="fileList"
    style="width: 100%"
    height="100%"
  >
    <el-table-column label="文件名">
      <template slot-scope="scope">
        <div class="line">
          <i class="icon" :class="fileType[scope.row.typeId].typeSuffix"></i>
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="创建时间">
      <template slot-scope="scope">
        <span style="margin-left: 10px">
          {{ scope.row.createTime }}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "DirList",
  props: {
    fileList: {
      type: Array,
      default: null
    },
    fileType: {
      default: null
    },
    removeId: {
      type: String
    }
  },
  methods: {
    click(row) {
      this.$router.push({
        path:
          "/pathSelector/" +
          JSON.stringify(this.fileType) +
          "/" +
          this.removeId,
        query: { id: row.id }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: no-repeat 100% 100%;
  background-size: cover;
}
.dir {
  background-image: url("../../static/icons/folder.png");
}
.zip {
  background-image: url("../../static/icons/zip.png");
}
.misc {
  background-image: url("../../static/icons/misc.png");
}
.music {
  background-image: url("../../static/icons/music.png");
}
.video {
  background-image: url("../../static/icons/video.png");
}
.txt {
  background-image: url("../../static/icons/txt.svg");
}
.line {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
